<template>
  <div class="login">
    <!-- 导航条 -->
    <van-nav-bar
  title="登录"
/>
<!-- 输入框 -->
<van-cell-group>
  <van-field
    v-model="mobile"
    required
    label="手机号"
    placeholder="请输入手机号"
    :error-message="errorMobileText"
      @input="validate" />
  <van-field
    v-model="code"
    required
    label="验证码"
    placeholder="请输入验证码"
      :error-message="errorCodeText"
      @input="validate" />
</van-cell-group>
<!-- 提交按钮 -->
<div class="login-wrap">
<van-button class="login-btn" type="info" @click="login">登录</van-button>
</div>
<van-button type="primary" @click="getProfile">获取个人信息</van-button>
</div>
</template>

<script>
// 导入登录模块api
import { reqLogin, reqGetProfile } from '@/api/user.js'
import { mapMutations } from 'vuex'
export default {
data() {
  return {
    mobile: '15936955129',
    code: '246810',
    errorMobileText: '', //手机号验证失败提示文本
    errorCodeText: '' // 验证码验证失败提示文本
  }
},
methods: {
  // ...mapMutations(模块名， [mutation名]),
    ...mapMutations('user', ['setTokenInfo']),
  // 表单验证
  validate () {
    //手机号的非空校验
 if (this.mobile.trim().length === 0) {
     this.errorMobileText = '手机号不能为空'
     return false
   }
   //  手机号的合法（11为数字）
    if (!/^1[3-9]\d{9}$/.test(this.mobile)) {
     this.errorMobileText = '请输入合法的手机号'
     return false
 }
 this.errorMobileText = ''
    //验证码的非空校验
   if (this.code.trim().length === 0) {
     this.errorCodeText = '验证码不能为空'
     return false
  }
//  验证码的合法（6为数字）
  if (!/^\d{6}$/.test(this.code)) {
     this.errorCodeText = '请输入正确的验证码'
     return false
  }
  // 输入框实时校验，如果以上4个分支都没有经过，输入的是合法，直接将提示文本清空
     this.errorCodeText = ''
     return true
  // validate最终给一个返回值，判断这个歌返回值是否为true，如果是true，发送请求，反之就不发送
  },
 
    //登录功能
    // ...mapMutations('user', ['setTokenInfo']),
 async login(){
   this.$toast.loading({
  message: '登录中...', // 提示文本
  forbidClick: true, // 禁止背景点击
  overlay: true, // 显示遮罩
  duration:0 //展示时长（ms）,值为0时，toast不会消失
});
   // 在发送请求之前输入框值得合法验证
   if (this.validate()) {
    //携带参数，发送请求
    // const data = await this.$http({
    //   method: 'POST',
    //   url: 'v1_0/authorizations',
    //   data: {
    //    mobile:this.mobile,
    //    code:this.code
    //   }
    // })
    // console.log(data)
   const { data } = await reqLogin(this.mobile,this.code)
   console.log(data.data)// 这个就是要存在state中的数据
   // data中有token 将token存储在vuex中state中 提交一个mutation this.$store.commit('mutation名',参数)
  //  this.$store.commit('user/setTokenInfo',data.data) // 这个也行
  this.setTokenInfo(data.data)  //映射也可以
    // 再去开启一个toast讲第一个toast层叠 toast 默认采用单例模式，同一时间只会存在一个Toast
    this.$toast.success('登录成功')
  }
}, 
// 测试接口,获取个人信息
 async getProfile () {
  const data = await reqGetProfile()
  console.log(data)
 }
}
}
</script>

<style lang="scss" scoped>
.login-wrap {
  padding: 20px;
  .login-btn{
    width: 100%;
    border-radius: 10px;
  }
}
</style>